$(function(){
	$.getJSON("js/index.json",function(str){
		//轮播图的请求
		var $ls=""
		$.each(str.LunBo,function(index,value){
			 $ls = "<div class='swiper-slide'><img src='"+value+"'/></div>";
			 $('.swiper-wrapper').append($ls)
		})
		var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        paginationClickable: true
    	});
 //-------------------------------------------------------------
    	//小商品列表的拼接
    	$.each(str.pinlist,function(index,value){
    		//console.log(value["bigimg"])
    	ls =	`<div class="index_colist">
					<a href="#" class="index_colist_a">
						<img src="${value["bigimg"]}"/>
					</a>
					<div class="index_colist_div">
						<div class="index_colist_div_pin">
							<img src="${value["smolimg"]}"  />
							${value["pinpai"]}
						</div>
						<div class="index_colist_jie">
							<a href="#">
								 ${value["title"]}
							</a>
						</div>
						<div class="index_colist_p">
							 ${value["neirong"]}
						</div>
						<div class="index_colist_num">
							已售
							<b>${value["yishou"]}</b>
							件
						</div>
						<div class="index_colist_pic">
							<span class="yuanpic">￥<b>${value["yuan"]}</b></span>
							<span class="delpic">￥<b>${value["jiang"]}</b></span>
							<a class="index_colist_gou">
							马上抢
							</a>
						</div>
					</div>
				</div>`
    	$("#index_country_list").append(ls)

    	 
    	})
    	
    	
    	
 //--------------------------------------------------------
    	$.each(str.weeklist,function(index,value){
    		//console.log(value)
      		ls =  	`<div class="index_pinlist">
			<div class="index_pinlist_c">
				<div class="index_pinlist_top">
					<div class="index_pinlist_topl">
						<i style="${value["i"]}" id="${value["name"]}"></i>
					</div>
					<div class="index_pinlist_topr">
						<h2>${value["h2"]}</h2>
						<p>${value["h2_p"]}</p>
						<a href="#">${value["amore1"]}</a><span>/</span>
						<a href="#">${value["amore2"]}</a> <span>/</span>
						<a href="#">${value["amore3"]}</a> <span>/</span>
						<a href="#">${value["amore4"]}</a> <span>/</span>
						<a href="#">${value["amore5"]}</a> <span>/</span>
						<a href="#">${value["amore6"]}</a> <span>/</span>
						<a href="#">${value["amore7"]}</a> <span>/</span>
						<a href="#">${value["amore8"]}</a>	
					</div>
				</div>
				<div class="index_pinlist_bom">
					<div class="index_pinlist_boml">
						<a href="#" class="index_pinlist_bomla">
							<img src="${value["lbingimg"]}" />
						</a>
						<p>
							<a href="#">${value["bmore1"]}</a>
							<a href="#">${value["bmore2"]}</a>
							<a href="#">${value["bmore3"]}</a>
							<a href="#">${value["bmore4"]}</a>
							<a href="#">${value["bmore5"]}</a>
							<a href="#">${value["bmore6"]}</a>
							<a href="#">${value["bmore7"]}</a>
							<a href="#">${value["bmore8"]}</a>
						</p>
					</div>
					<div class="index_pinlist_bomc">
						<section class="index_tl index_se">
							<div class="index_se_top">
								<div class="index_se_smoimg">
									<img src="${value["csmoimg1"]}"/>
									 ${value["csmopinpai1"]}
								</div>
								<a href="#" class="index_se_bigimg">
									<img src="${value["cbigimg1"]}" />
								</a>
							</div>
							<p>
								<a href="#"> ${value["csmopinpaih1"]}</a>
							</p>
							<div class="index_se_pic">
								<span class="index_se_pic_jiang">￥<b>${value["csmopinpaijiang1"]}</b></span>
								<span class="index_se_pic_yuan">￥<b>${value["csmopinpaiyuan1"]}</b></span>
							</div>
						</section>
						<section class="index_tr index_se">
							<div class="index_se_top">
								<div class="index_se_smoimg">
									<img src="${value["csmoimg2"]}"/>
									${value["csmopinpai2"]}
								</div>
								<a href="#" class="index_se_bigimg">
									<img src="${value["cbigimg2"]}" />
								</a>
							</div>
							<p>
								<a href="#">${value["csmopinpaih2"]}</a>
							</p>
							<div class="index_se_pic">
								<span class="index_se_pic_jiang">￥<b>${value["csmopinpaijiang2"]}</b></span>
								<span class="index_se_pic_yuan">￥<b>${value["csmopinpaiyuan2"]}</b></span>
							</div>
						</section>
						<section class="index_bl index_se">
							<div class="index_se_top">
								<div class="index_se_smoimg">
									<img src="${value["csmoimg3"]}"/>
									${value["csmopinpai3"]}
								</div>
								<a href="#" class="index_se_bigimg">
									<img src="${value["cbigimg3"]}" />
								</a>
							</div>
							<p>
								<a href="#">${value["csmopinpaih3"]}</a>
							</p>
							<div class="index_se_pic">
								<span class="index_se_pic_jiang">￥<b>${value["csmopinpaijiang3"]}</b></span>
								<span class="index_se_pic_yuan">￥<b>${value["csmopinpaiyuan3"]}</b></span>
							</div>
						</section>
						<section class="index_br index_se">
							<div class="index_se_top">
								<div class="index_se_smoimg">
									<img src="${value["csmoimg4"]}"/>
									${value["csmopinpai4"]}
								</div>
								<a href="#" class="index_se_bigimg">
									<img src="${value["cbigimg4"]}" />
								</a>
							</div>
							<p>
								<a href="#">${value["csmopinpaih4"]}</a>
							</p>
							<div class="index_se_pic">
								<span class="index_se_pic_jiang">￥<b>${value["csmopinpaijiang4"]}</b></span>
								<span class="index_se_pic_yuan">￥<b>${value["csmopinpaiyuan4"]}</b></span>
							</div>
						</section>
					</div>
					<div class="index_pinlist_bomr">
						<span>
							
						</span>
						<a href="#">
							<img src="${value["cdaimg"]}" />
						</a>
					</div>
				</div>
			</div>
		</div>`
      		//console.log(ls)
      		$("#index_bottop").before(ls)
    	})
    	
    	//-------------------------------------------划过图片变大
    	 $(".index_colist").mouseenter(function(){
    	 	//$(this).find("img").eq(0).css({"width":"274","height":"274"})
    		$(this).find("img").eq(0).animate({"width":"274","height":"274","top":"-20","left":"-20"},200)
    	 })
    	 $(".index_pinlist_bomla").mouseenter(function(){
    	 	$(this).find("img").animate({"width":"250","height":"416","top":"-20","left":"-15"},200)
    	 })
    	 $(".index_pinlist_bomr").mouseenter(function(){
    	 	$(this).find("img").animate({"width":"450","height":"550","top":"-25","left":"-25"},200)
    	 })
    	 $(".index_se_top").mouseenter(function(){
    	 	$(this).find("img").animate({"marginLeft":"-20"},200)
    	 })
    	//--------------------------------------------划出变回来
    	$(".index_colist").mouseleave(function(){ 
    		$(this).find("img").eq(0).animate({"width":"234","height":"234","top":"0","left":"0"},200)
    	 })
    	 $(".index_pinlist_bomla").mouseleave(function(){
    	 	$(this).find("img").animate({"width":"220","height":"376","top":"0","left":"0"},200)
    	 })
    	 $(".index_pinlist_bomr").mouseleave(function(){
    	 	$(this).find("img").animate({"width":"400","height":"500","top":"0","left":"0"},200)
    	 })
    	 $(".index_se_top").mouseleave(function(){
    	 	$(this).find("img").animate({"marginLeft":"0"},200)
    	 })
		//--------------------------------------------a划过变红
		$(".index_colist a").mouseenter(function(){
			$(this).css({"color":"red"})
		})
		$(".index_colist a").mouseleave(function(){
			 $(this).css({"color":"#1a1818"})
		})
		$(".index_pinlist a").mouseenter(function(){
			$(this).css({"color":"red"})
		})
		$(".index_pinlist a").mouseleave(function(){
			 $(this).css({"color":"#1a1818"})
		})
    	//-----------------------------------------------
    	$("#index_guojiul li").mouseover(function(){
    		$(this).siblings().removeClass("active")
    		 $(this).addClass("active")
    		 console.log($("#xian li").eq($(this).index()).siblings())
    		 $("#xian li").eq($(this).index()).css({"display":"block"})
    		 $("#xian li").eq($(this).index()).siblings().css({"display":"none"})
    	})

    	
    	//----------------------------------------------一定高度出现
    	$(window).scroll(function(){
    		 if($(document).scrollTop()>800){
    		 	$(".index_louti").css({"display":"block"})
    		 }else{
    		 	$(".index_louti").css({"display":"none"})
    		 }
    	})
    	$(".index_louti li").hover(function(){
    		$(this).find("a").css({"opacity":"0"})
    		$(this).find("span").css({"display":"block"})
    		
    	},function(){
    		$(this).find("a").css({"opacity":"1"})
    		$(this).find("span").css({"display":"none"})
    	})
    	
    	
    	
    	
    	
	})
	
	
	
})
 